<template>
	<view class="yb-comment y-flex" :style="{'border-bottom-color': skinColor.color_gap_1, 'background-color': boxBgColor}">
		<view class="top y-flex y-row y-align-center">
			<com-avatar size="60" class="avatar" lazy-load :src="item.avatar" v-if="item.avatar"></com-avatar>
			<view class="info y-flex y-justify-between">
				<com-text :size="26" :color="skinColor.color_2" :lines="1" :value="item.title" @click="handleTitleTap(item)" />
				<com-text :size="20" :color="skinColor.color_2" :lines="1" :value="item.subtitle" />
			</view>
		</view>
		<view class="bottom" :style="{'padding-left': item.avatar ? '80rpx' : 0}" v-if="item.masterComments && item.masterComments.length > 0">
			<view class="child" :style="{'background-color': skinColor.color_gap_1}" v-if="item.masterComments.length > 0">
				<view class="list" :style="{'border-color': skinColor.color_gap_1}" v-for="(child, i) in item.masterComments" :key="i">
					<view class="top y-flex y-row y-align-center">
						<com-avatar size="60" class="avatar" lazy-load :src="child.avatar" v-if="child.avatar"></com-avatar>
						<view class="info y-flex y-justify-between">
							<com-text :size="26" :color="skinColor.color_2" :lines="1" :value="child.title" @click="handleTitleTap(child)" />
							<com-text :size="20" :color="skinColor.color_2" :lines="1" :value="child.subtitle" />
						</view>
					</view>
					<view class="bottom" :style="{'padding-left': child.avatar ? '80rpx' : 0}">
						<com-read-more @longpress="copyComment(child)" class="mt-10" :shadow-color="skinColor.color_gap_1" :text="handleEmojiText(child.content)" :color="skinColor.color_1" font-size="28" line-height="40"></com-read-more>
					</view>
				</view>
			</view>
			<com-read-more @longpress="copyComment(item)" class="mt-10" :shadow-color="boxBgColor" :text="'回复：' + handleEmojiText(item.content)" :color="skinColor.color_1" font-size="28" line-height="40"></com-read-more>
		</view>
		<view class="bottom" :style="{'padding-left': item.avatar ? '80rpx' : 0}" v-else>
			<com-read-more @longpress="copyComment(item)" class="mt-10" :shadow-color="boxBgColor" :text="handleEmojiText(item.content)" :color="skinColor.color_1" font-size="28" line-height="40"></com-read-more>
			<view class="child" :style="{'background-color': skinColor.color_gap_1}" v-if="item.subComments && item.subComments.length > 0">
				<view class="list" :style="{'border-color': skinColor.color_gap_1}" v-for="(child, i) in item.subComments.slice(0, moreShow ? item.subComments.length : 1)" :key="i">
					<view class="top y-flex y-row y-align-center">
						<com-avatar size="60" class="avatar" lazy-load :src="child.avatar" v-if="child.avatar"></com-avatar>
						<view class="info y-flex y-justify-between">
							<com-text :size="26" :color="skinColor.color_2" :lines="1" :value="child.title" @click="handleTitleTap(child)" />
							<com-text :size="20" :color="skinColor.color_2" :lines="1" :value="child.subtitle" />
						</view>
					</view>
					<view class="bottom" :style="{'padding-left': child.avatar ? '80rpx' : 0}">
						<com-read-more @longpress="copyComment(child)" class="mt-10" :shadow-color="skinColor.color_gap_1" :text="handleEmojiText(child.content)" :color="skinColor.color_1" font-size="28" line-height="40"></com-read-more>
					</view>
				</view>
			</view>
			<view class="more y-flex y-row y-align-center" v-if="item.subComments && item.subComments.length > 1" @tap="showMore">
				<text class="more-text" :style="{color: skinColor.color_blue}">{{ moreShow ? '收起更多回复' : '查看更多回复'}}</text>
				<view class="arrow" :class="{'arrow-up': moreShow, 'arrow-down': !moreShow}" :style="{'border-color': skinColor.color_blue}"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import emojis from '@/assets/other/emoji.js'
	import HTMLParser from '@/uni_modules/html-parser/js_sdk/index.js';
	export default {
		inject: ['getSkinColor', 'getBoxBgColor', 'navigate'],
		props: {
			item: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			boxBgColor () {
				return this.getBoxBgColor()
			}
		},
		data () {
			return {
				moreShow: false
			}
		},
		methods: {
			copyComment (params) {
				uni.setClipboardData({
				    data: params.content,
				    success: () => {
				        uni.showToast({
				        	title: '已复制 ' + params.title + ' 的评论',
							icon: 'none'
				        })
				    },
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
					}
				});
			},
			handleEmojiText (str) {
				let document = new HTMLParser(str)
				let imgs = document.getElementsByTagName('img')
				imgs.forEach(img => {
					if ( img.attributes.alt || img.attributes.title ) str = str.replace(img.tagContent, '[' + (img.attributes.alt || img.attributes.title) + ']')
				})
				var reg = /\[.+?\]/g;
				str = str.replace(reg, function(a,b){
					return emojis[a] || a;
				})
				return str
			},
			showMore () {
				this.moreShow = !this.moreShow
			},
			handleTitleTap (item) {
				this.navigate(item.url)
			}
		}
	}
</script>

<style scoped>
	.yb-comment {
		padding: 20rpx;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	.yb-comment .child {
		margin: 20rpx 0;
	}
	.yb-comment .child .list {
		padding: 20rpx;
	}
	.yb-comment .top .avatar {
		margin-right: 20rpx;
	}
	.yb-comment .top .info {
		height: 60rpx;
	}
	.yb-comment .bottom {
		padding-left: 80rpx;
	}
	.yb-comment .bottom .more .more-text {
		font-size: 20rpx;
	}
	.yb-comment .bottom .more .arrow {
		width: 12rpx;
		height: 12rpx;
		border-bottom-width: 2rpx;
		border-right-width: 2rpx;
		margin-left: 5rpx;
	}
	.yb-comment .bottom .more .arrow-up {
		margin-top: 6rpx;
		transform: rotateZ(-135deg);
	}
	.yb-comment .bottom .more .arrow-down {
		margin-top: -6rpx;
		transform: rotateZ(45deg);
	}
</style>